'use client';
import i18next from 'i18next';
import {usePathname} from 'next/navigation';
import {forwardRef, memo, ReactNode, useEffect, useMemo} from 'react';
import {Dropdown, Nav, Stack} from 'react-bootstrap';
import {useTranslation} from 'react-i18next';
import {Translate} from '@icon-park/react';
import {useJump, usePathLevel} from '@/modules/url';
import useTrans from '../i18nTranslation';
import style from './style.module.scss';


const CustomToggle = forwardRef(function CustomToggle(
    props: {children: ReactNode, onClick: () => void},
    ref: any
) {
    return <div
        ref={ref}
        onClick={props.onClick}
    >{props.children}</div>;
});

const Header = memo(function Header() {
    const {t} = useTrans();
    const {currentPath: langPath} = usePathLevel(0);
    const {currentPath: tabPath} = usePathLevel(1);
    const {jump} =  useJump();

    const items = [
        {label: t('格式化json'), key: 'json-editor'},
        {label: t('diff'), key: 'diff'}
        // {label: '图片压缩', key: 'image-mini'},
        // {label: '网页截图', key: 'webpage-screenshot'}
    ];
    const langItems = [
        {label: '简体中文', key: 'zh'},
        {label: 'English', key: 'en'}
    ];
    const curLangLabel = useMemo(() => langItems.find(item => item.key === langPath)?.label, [langPath]);

    const handleSelect = (key: string | null) => {
        jump(key!, {level: 1});
    };

    const handleSelectLang = (lang: string) => {
        jump(lang, {level: 0});
    };

    return (
        <header className={style['header-wrapper']}>
            <Stack direction='horizontal' className='tw-h-full'>
                <Nav as="ul" className='tw-flex-1' variant='underline' activeKey={tabPath} onSelect={handleSelect}>
                    {items.map(({label, key}) => (
                        <Nav.Item as="li" key={key}>
                            <Nav.Link as='nav' style={{cursor: 'pointer'}} eventKey={key} key={key}>{label}</Nav.Link>
                        </Nav.Item>
                    ))}
                </Nav>
                <Dropdown>
                    <Dropdown.Toggle as={CustomToggle}>
                        <Stack direction='horizontal' className='tw-h-full' style={{cursor: 'pointer'}} gap={1}>
                            <Translate theme="outline" size="18" fill="#333"/>
                            <span style={{fontSize: '16Px'}}>{curLangLabel}</span>
                        </Stack>
                    </Dropdown.Toggle>
                    <Dropdown.Menu align='start'>
                        {langItems.map(({label, key}) => (
                            <Dropdown.Item
                                as='li'
                                key={key}
                                active={langPath === key}
                                style={{cursor: 'pointer', fontSize: '16Px'}}
                                onClick={() => handleSelectLang(key)}
                            >{label}</Dropdown.Item>
                        ))}
                    </Dropdown.Menu>
                </Dropdown>
            </Stack>
        </header>
    );
});

export default Header;
